<template>
  <h6>{{ data.age }}</h6>
  <h6>{{ data.name }}</h6>
  <hr />
  <h6>{{ name }}</h6>
  <button @click="onClickHandler">click</button>

  <hr />
  <h6>{{ person.brand.title }}</h6>

  <hr />
  <h6>{{ age }}</h6>
  <h6>{{ person.sex.one }}</h6>
  <hr />
  <h6>{{ brand.title }}</h6>
  <h6>{{ sex.one }}</h6>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
// 导入ref
// import { ref, computed } from "vue";
export default defineComponent({
  name: "App",
  // 组合式API入口

  setup() {
    // 定义参数
    const data = reactive({
      name: "free",
      age: 10,
      person: { brand: { title: "haha" }, sex: { one: "女" } },
    });

    const onClickHandler = () => {
      data.name = "ffff";
      data.person.brand.title = "xxxx";
    };

    // 返回值
    return {
      data,
      // toref 使用 第一个参数 data 目标对象  第二个参数 属性
      // name: data.name,
      // name: toRef(data, "name"),
      onClickHandler,
      // 简化写法 层级嵌套深。继续点下去 ，最后一个值时属性
      // brand: data.person.brand.title,
      // brand: toRef(data.person.brand, "title"),
      ...toRefs(data),
      ...toRefs(data.person),
    };
  },
  components: {},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
